// 视频背景交互
function initVideoBackground() {
    // 检查是否存在视频背景元素
    const videoContainer = document.querySelector('.video-container');
    if (!videoContainer) {
        console.log('Video background element not found, skipping initialization');
        return;
    }

    console.log('Video background initialized');

    // 获取视频元素
    const video = videoContainer.querySelector('video');
    if (!video) {
        console.log('Video element not found');
        return;
    }

    // 获取视频列表
    const videoList = JSON.parse(videoContainer.dataset.videos || '[]');
    const totalVideos = videoList.length;
    let currentVideoIndex = 0;

    // 获取控制元素
    const controls = videoContainer.querySelector('.video-carousel-controls');
    const pagination = videoContainer.querySelector('.video-carousel-pagination-container');
    const prevButton = videoContainer.querySelector('.video-carousel-prev');
    const nextButton = videoContainer.querySelector('.video-carousel-next');
    const paginationText = videoContainer.querySelector('.video-carousel-pagination');

    // 根据视频数量显示/隐藏控制元素
    if (totalVideos > 1) {
        controls.style.display = 'flex';
        pagination.style.display = 'block';
        updatePagination();
    }

    // 更新分页显示
    function updatePagination() {
        if (paginationText) {
            paginationText.innerHTML = `${String(currentVideoIndex + 1).padStart(2, '0')}/<span>${String(totalVideos).padStart(2, '0')}</span>`;
        }
    }

    // 切换视频
    function switchVideo(index) {
        if (index < 0) index = totalVideos - 1;
        if (index >= totalVideos) index = 0;
        
        currentVideoIndex = index;
        const newVideoSrc = videoList[index];
        
        // 更新视频源
        video.querySelector('source').src = newVideoSrc;
        video.load();
        video.play().catch(error => {
            console.log('Video play failed:', error);
        });
        
        updatePagination();
    }

    // 添加按钮事件监听
    if (prevButton) {
        prevButton.addEventListener('click', () => {
            switchVideo(currentVideoIndex - 1);
        });
    }

    if (nextButton) {
        nextButton.addEventListener('click', () => {
            switchVideo(currentVideoIndex + 1);
        });
    }

    // 创建 Intersection Observer
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 视频进入视窗时播放
                video.play().catch(error => {
                    console.log('Video play failed:', error);
                });
            } else {
                // 视频离开视窗时暂停
                video.pause();
            }
        });
    }, {
        threshold: 0.5 // 当视频50%进入视窗时触发
    });

    // 开始观察视频容器
    observer.observe(videoContainer);

    // 处理视频加载
    video.addEventListener('loadeddata', () => {
        console.log('Video loaded successfully');
    });

    // 处理视频错误
    video.addEventListener('error', (error) => {
        console.error('Video error:', error);
    });

    // 处理视频播放状态
    video.addEventListener('play', () => {
        console.log('Video started playing');
    });

    video.addEventListener('pause', () => {
        console.log('Video paused');
    });

    // 处理移动端性能优化
    if ('ontouchstart' in window) {
        // 移动端降低视频质量
        video.setAttribute('playsinline', '');
        video.setAttribute('muted', '');
    }
}

// 确保在组件加载完成后执行
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initVideoBackground);
} else {
    initVideoBackground();
} 